<template>
  <Modal
    v-model="isShow"
    scrollable
    :mask-closable="false"
    :title="
      $srv.getI18nByPath('system.components.custom') +
        $srv.getI18nByPath('piece.oChartSetting.filter')
    "
    @on-ok="ok"
    @on-cancel="cancel"
    class="filter-modal"
  >
    <div class="filter-modal-item" v-for="(f, idx) in filters" :key="idx">
      <!--eslint-disable vue/no-use-v-if-with-v-for-->
      <Select
        class="filter-modal-item-field-select"
        :placeholder="$srv.getI18nByPath('others.select')"
        v-model="f.field"
        @on-change="fieldChange(f.field)"
      >
        <!-- v-if排除一些不能参与筛选的列，如‘#’列 -->
        <Option
          v-for="cs in columns"
          v-if="cs.title && cs.title !== '#'"
          :key="cs.idx"
          :value="cs.idx"
        >
          {{ $srv.getI18nBySrv(cs.title) }}
        </Option>
      </Select>
      <Select
        class="filter-modal-item-condition-select"
        :placeholder="$srv.getI18nByPath('others.select')"
        v-model="f.condition"
        @on-change="f.val = null"
      >
        <Option v-for="t in types[getType(f.field) + 's']" :key="t" :value="t">
          {{ t }}
        </Option>
      </Select>
      <Select
        class="filter-modal-item-value-select"
        :placeholder="$srv.getI18nByPath('others.select')"
        multiple
        v-model="f.val"
        @on-open-change="openValSelect(arguments, f.field)"
        v-if="
          f.condition === `= （${$srv.getI18nByPath('vxe.filter.equal')}）` ||
            f.condition === `≠（${$srv.getI18nByPath('vxe.filter.notequal')}）`
        "
      >
        <Option
          v-for="(v, idx) in f.field ? valss[columns[f.field].title] : []"
          :key="idx"
          :value="v"
        >
          {{ $srv.getI18nBySrv(v) }}
        </Option>
      </Select>
      <AutoComplete
        v-model="f.val"
        :placeholder="$srv.getI18nByPath('oSetupPanel.drag.content')"
        class="filter-modal-item-value-select"
        v-else
      >
        <Option v-for="item in getCandidates(f)" :value="item" :key="item">
          {{ item }}
        </Option>
      </AutoComplete>
      <Icon
        type="md-close"
        class="filter-modal-item-delete"
        size="20"
        @click="
          filters.length > 1
            ? filters.splice(idx, 1)
            : (f.condition =
                `= （${$srv.getI18nByPath('vxe.filter.equal')}）` &&
                (f.field = f.val = null))
        "
      />
    </div>
    <div class="filter-modal-add-item">
      <Button
        @click="
          filters.push({
            field: null,
            condition: `= （${$srv.getI18nByPath('vxe.filter.equal')}）`,
            val: null
          })
        "
        type="success"
        long
      >
        {{ $srv.getI18nByPath('piece.oQueryLinkSettingq.increasecondition') }}
      </Button>
    </div>
  </Modal>
</template>

<script lang="ts">
import { Tsrv, T_srv, ifs, ts, vue } from '@/services';

import { ColumnConfig } from 'vxe-table/types/column';

@T_srv.comp
export default class filterModal extends vue {
  @T_srv.prop({
    type: Number,
    required: true,
    default: 0
  })
  value: number;

  @T_srv.prop({
    type: Array,
    default: []
  })
  columns!: Array<ColumnConfig>;

  @T_srv.prop({
    type: Function,
    default: () => {}
  })
  loadfilter!: Function;

  @T_srv.watch('value')
  valueChange(val) {
    if (val === -1) {
      this.filters = [
        {
          field: null,
          condition: `= （${Tsrv.getI18nByPath('vxe.filter.equal')}）`,
          val: null
        }
      ];
    } else {
      this.isShow = !!val;
    }
  }

  getColumnType = Tsrv.utils.getColumnType;

  filters = [
    {
      field: null,
      condition: `= （${Tsrv.getI18nByPath('vxe.filter.equal')}）`,
      val: null
    }
  ];

  valss = {};

  types = {
    strings: [
      `= （${Tsrv.getI18nByPath('vxe.filter.equal')}）`,
      `≠（${Tsrv.getI18nByPath('vxe.filter.notequal')}）`,
      `⊇（${Tsrv.getI18nByPath('vxe.filter.include')}）`,
      `⊄（${Tsrv.getI18nByPath('vxe.filter.notinclude')}）`
    ],
    alls: [
      // 默认（全都有）
      `= （${Tsrv.getI18nByPath('vxe.filter.equal')}）`,
      `≠（${Tsrv.getI18nByPath('vxe.filter.notequal')}）`,
      `>（${Tsrv.getI18nByPath('vxe.filter.more')}）`,
      `＜（${Tsrv.getI18nByPath('vxe.filter.less')}）`,
      `≥（${Tsrv.getI18nByPath('vxe.filter.moreorequal')}）`,
      `≤（${Tsrv.getI18nByPath('vxe.filter.lessorequal')}）`,
      `⊇（${Tsrv.getI18nByPath('vxe.filter.include')}）`,
      `⊄（${Tsrv.getI18nByPath('vxe.filter.notinclude')}）`
    ],
    datetimes: [
      `= （${Tsrv.getI18nByPath('vxe.filter.equal')}）`,
      `≠（${Tsrv.getI18nByPath('vxe.filter.notequal')}）`,
      `>（${Tsrv.getI18nByPath('vxe.filter.more')}）`,
      `＜（${Tsrv.getI18nByPath('vxe.filter.less')}）`,
      `≥（${Tsrv.getI18nByPath('vxe.filter.moreorequal')}）`,
      `≤（${Tsrv.getI18nByPath('vxe.filter.lessorequal')}）`
    ],
    numbers: [
      `= （${Tsrv.getI18nByPath('vxe.filter.equal')}）`,
      `≠（${Tsrv.getI18nByPath('vxe.filter.notequal')}）`,
      `>（${Tsrv.getI18nByPath('vxe.filter.more')}）`,
      `＜（${Tsrv.getI18nByPath('vxe.filter.less')}）`,
      `≥（${Tsrv.getI18nByPath('vxe.filter.moreorequal')}）`,
      `≤（${Tsrv.getI18nByPath('vxe.filter.lessorequal')}）`
    ]
  }; // 正则/通配符/∽（相似）

  isShow = false;

  created() {
    this.columns.forEach((e, idx) => {
      e.idx = idx;
    });
  }

  mounted() {}

  getCandidates(f: any) {
    const L_candidates = f.field ? this.valss[this.columns[f.field].title] : [];
    const L_list = [];
    if (L_candidates && L_candidates.length > 0) {
      L_candidates.forEach((element: string) => {
        Tsrv.getI18nBySrv(element).indexOf(Tsrv.getI18nBySrv(f.val)) !== -1 &&
          L_list.push(Tsrv.getI18nBySrv(element));
      });
    }
    return L_list;
  }

  getType(idx: number) {
    return idx ? Tsrv.utils.getColumnType(this.columns[idx]).type : 'all';
  }

  private fieldChange(e: number) {
    if (e && !this.valss[this.columns[e].title]) {
      this.loadfilter(this.columns[e].field).then(data => {
        if (Tsrv.utils.isArray(data)) {
          this.valss[this.columns[e].title] = data;
        } else {
          this.valss[this.columns[e].title] = [];
        }
        // this.$forceUpdate();
        this.filters.push(null);
        this.filters.length = this.filters.length - 1;
      });
    }
  }

  private cancel() {
    this.$emit('status', { v: 0, fts: false });
  }

  private ok() {
    this.$emit('status', { v: 0, fts: true, filters: this.filters });
  }

  private openValSelect(status: any, e: any) {
    if (status[0] && !e) {
      this.$msg(
        `${Tsrv.getI18nByPath('others.select')}${Tsrv.getI18nByPath(
          'vxe.m2o.title'
        )}`
      );
    }
  }
}
</script>
<style lang="scss" scoped>
.filter-modal-item {
  text-align: center;
  margin: 5px;
  display: flex;
  justify-content: center;
  align-items: center;
  .filter-modal-item-field-select {
    width: 130px;
    text-align: left;
  }
  .filter-modal-item-condition-select {
    width: 130px;
    margin: 0px 25px;
  }
  .filter-modal-item-value-select {
    width: 130px;
  }
  .filter-modal-item-delete {
    cursor: pointer;
    margin-left: 8px;
    &.hover {
      color: red;
    }
  }
}
.filter-modal-add-item {
  margin: 10px auto;
  text-align: center;
  width: 80%;
}
</style>
